<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>1.初识Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        总结:
            1.想让Vue工作,就必须创建一个Vue实例对象,且必须传入一个配置对象
            2.demo容器中的代码,依然符合html规范,事不过其中混入了一些特殊的Vue语法
            3.demo容器中的html代码+Vue语法, 称之为Vue模板
        注意点:
            1.Vue实例和容器是一一对应的,正式开发中一定只有一个Vue实例,且真实开发中会配合组件一起使用
            2.data中的数据只要发生改变,模板中用到该数据的地方,就会自动更新
            3.{{xxx}}中的xxx要写js表达式,且xxx可以直接读取到data中配置的属性

            注意区分(js表达式)与(js语句(代码))
                1.表达式:会产生一个值,可以放在任何 一个需要值的地方
                    1. 100
                    2. a
                    3. demo()
                    4. x === y ? 1 : 0
                 2.js语句(代码):不会产生值,只是控制代码走向
                    1. if(){}
                    2. for(){}
        -->
     <!-- z准备好一个容器 -->
     <div id="demo">
         <h1>hi,{{name}}</h1>
         <hr>
         <h1>人物:{{person.name}}</h1>
         <h1>年龄:{{person.age}}</h1>
         <a v-bind:href="person.url" a="age" >hahah</a>
     </div>
     <script  type="text/javascript">
         Vue.config.productionTip = false //阻止 Vue 在启动时产生的生产提示

        //  创建一个Vue实例对象
        new Vue({
             //el指定当前的Vue实例服务于那个容器 值为css选择器  
             // el的值可以是:css选择器字符串(用的多),写一个真实的DOM元素(几乎不用)
            el:'#demo',
            // data用与配置数据,提供el所指定的容器去使用,data的值暂时先写成一个对象,后期学了组件,我们就会写成函数
            data:{ 
                name:'我叫MT',
                person:{
                    name:'哀木涕',
                    age:14,
                    url:"https://live.polyv.cn/watch/2455902"
                },
                url:"https://gitee.com/tianyucoder/vue_basic_210607"
            }
        })
     </script>
    </script>
</body>

</html>